<template>
  <!--<div>
      <ul class="menu-tab">
          <li :class="{ current: this.current_menu === item.type }" v-for="item in formData.tab_menu" :key="item.type"
              @click="toggleMenu(item.type)">
              {{ item.label }}
          </li>
      </ul>
  </div>-->
  <div class="page-container">
    <el-form label-width="0.4375rem" :model="searchForm" class="flex flex-between">
      <el-form-item label="疾病关键字">
        <el-input v-model="searchForm.keywords" placeholder="请输入关键字" maxlength="100"/>
      </el-form-item>
      <el-form-item label="图像类型">
        <el-select v-model="searchForm.imgType" placeholder="请选择" style="width: 220px;">
          <el-option value="label" label="标记图">标记图</el-option>
          <el-option value="original" label="原图">原图</el-option>
        </el-select>
        <!--<el-input v-model="searchForm.imgType" placeholder="请输入关键字" maxlength="100"/>-->
      </el-form-item>
      <el-form-item label="时间范围">
        <el-date-picker v-model="searchForm.timeRange" type="daterange" value-format="YYYY-MM-DD" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" />
      </el-form-item>
      <el-form-item label="">
        <div class="flex">
          <el-button type="primary" @click="search">搜索</el-button>
          <el-button plain @click="reset">重置</el-button>
        </div>
      </el-form-item>
    </el-form>
    <page-table v-loading="loading" :data="tableData" :page="page" class="x-wrap page-content dark-head" @page-change="doQuery">
      <el-table-column prop="caseTitle" label="编号"/>
      <el-table-column prop="clinicalHistory" label="关键字"/>
      <el-table-column prop="machine" label="机器"/>
      <el-table-column prop="tracer" label="示踪剂"/>
      <el-table-column prop="updateTime" label="上传时间"/>
      <el-table-column label="操作">
        <template #default="scope">
          <el-link :underline="false" type="primary" @click="doLook(scope.$index)">查看</el-link>
        </template>
      </el-table-column>
    </page-table>
  </div>
  <preview-viewer v-model="previewIndex" :previewList="previewList"/>
</template>

<script lang="ts">
import * as api from '@/api/case'
import {Options, Prop, Watch} from "vue-property-decorator";
import BasePage from "../BasePage";
import {reactive, toRaw, getCurrentInstance} from 'vue'
import {useRoute, useRouter} from 'vue-router'
import PreviewViewer from "./components/PreviewViewer.vue";
import {} from 'vue'

const searchForm = { keywords: '', imgType: '', timeRange: undefined }
const queryData = {
  page: {current: 1, size: 10},
  homeVO: {homeType: '00'}
}
@Options({
  name: 'CaseList',
  components: {
    PreviewViewer
  }
})
export default class CaseList extends BasePage {

  previewIndex = -1

  previewList = []

  searchForm = { ...searchForm }
  tableData = {records: [], total: 0}

  page = {current: 1, size: 20}

  user = JSON.parse(sessionStorage.getItem('userInfo')) ? JSON.parse(sessionStorage.getItem('userInfo')) : {}

  formData = reactive({
    tab_menu:
        [
          {type: "normal", label: "所有病例"},
          {type: "mark", label: "我收藏的"}
        ]
  })

  get isInCollect() {
    return this.$route.name === 'CollectCase'
  }

  get searchParam() {
    const param = { ...this.searchForm }
    if (param.timeRange) {
      param.timeRange = [`${param.timeRange[0]} 00:00:00`, `${param.timeRange[1]} 23:59:59`]
    }
    return param
  }
  // toggleMenu(type) {
  //   this.current_menu = type;
  //   if (type === "normal") {
  //     this.doQuery()
  //   } else {
  //     this.doMarkQuery()
  //   }
  // };

  current_menu = this.formData.tab_menu[0].type;

  @Watch('isInCollect')
  onViewChange() {
    this.reset()
  }

  created() {
    this.doQuery()
  }

  async doQuery() {
    if (this.isInCollect) {
      return this.doMarkQuery()
    }
    this.loading = true
    const resp = await api.findCaseList({
      page: this.page, userId: this.user.userId, ...this.searchParam
    })
    this.loading = false
    if (resp) {
      const records = resp.data || []
      this.tableData = {
        records,
        total: resp.page ? resp.page.total : 0
      }
    }
  }

  async doMarkQuery() {
    this.loading = true
    const resp = await api.findMarkList({
      page: this.page, userId: this.user.userId, ...this.searchParam
    })
    this.loading = false
    if (resp) {
      const records = resp.data || []
      this.tableData = {
        records,
        total: resp.page ? resp.page.total : 0
      }
    }
  }

  doLook(index: any) {
    // this.previewList = this.tableData.records
    // this.previewIndex = index
    this.$router.push({name: 'CaseDetail', query: {id: this.tableData.records[index].caseId}})
  }

  reset() {
    this.searchForm = { ...searchForm }
    this.doQuery()
  }

  search() {
    this.doQuery()
  }

}
</script>
<style lang='scss' scoped>
.page-container {
  min-height: calc(100vh - 700px);
}
.x-wrap {
  position: relative;
  margin: auto;
  width: 1230px;
  height: 100%;
}

.menu-tab {
  position: relative;
  width: 1230px;
  height: 100%;
  text-align: left;
  margin: auto;
  margin-bottom: 10px;

  li {
    display: inline-block;
    padding: 10px 24px;
    margin: 0 10px;
    color: #db6c6c;
    font-size: 14px;
    border-radius: 5px;
    cursor: pointer;

    &.current {
      background-color: rgba(0, 0, 0, 0.1);
    }
  }
}

.el-form :deep(.el-form-item) {
  .el-input, .el-date-editor--daterange {
    height: 36px;
    --el-input-border-radius: 2px;
    --el-input-bg-color: #F5F5F6;
  }
  .el-button {
    height: 36px;
    width: 76px;
    min-width: 76px;
    border-radius: 2px;
    &.is-plain {
      border: 1px solid #DADBDD;
      &:hover {
        border-color: currentColor;
      }
    }
  }
  &:first-child {
    .el-form-item__label {
      white-space: nowrap;
      width: 84px !important;
    }
  }
  .el-form-item__content {
    width: 240px;
  }
  &:last-child .el-form-item__content {
    margin: 0!important;
    width: 180px;
    justify-content: flex-end;
  }
}
</style>